<template>
          <div class="lime-container">
            <div class="lime-body">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="page-title">
                                <nav aria-label="breadcrumb">
                                  <ol class="breadcrumb breadcrumb-separator-1">
                                    <li class="breadcrumb-item"><a href="#">Styles</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Icons</li>
                                  </ol>
                                </nav>
                                <h3>Icons</h3>
                                <p class="page-desc">Font icons from open source collections that are included and ready to use in your project.</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Fontawesome</h5>
                                    <p>Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit. Visit <a href="https://fontawesome.com/icons?d=gallery&m=free" target="_blank">FontAwesome's Official Website</a> for a complete list of icons.</p>
                                    <div class="row icon-list-row">
                                        <div class="col-sm-1">
                                            <i class="fab fa-500px"></i>
                                        </div>
                                        <div class="col-sm-1">
                                            <i class="fab fa-accessible-icon"></i>
                                        </div>
                                        <div class="col-sm-1">
                                            <i class="fab fa-accusoft"></i>
                                        </div>
                                        <div class="col-sm-1">
                                            <i class="fab fa-acquisitions-incorporated"></i>
                                        </div>
                                        <div class="col-sm-1">
                                            <i class="fas fa-ad"></i>
                                        </div>
                                        <div class="col-sm-1">
                                            <i class="fas fa-address-book"></i>
                                        </div>
                                        <div class="col-sm-1">
                                            <i class="far fa-angry"></i>
                                        </div>
                                        <div class="col-sm-1">
                                            <i class="fas fa-angle-double-down"></i>
                                        </div>
                                        <div class="col-sm-1">
                                            <i class="fab fa-apple-pay"></i>
                                        </div>
                                        <div class="col-sm-1">
                                            <i class="fas fa-at"></i>
                                        </div>
                                        <div class="col-sm-1">
                                            <i class="fas fa-battery-half"></i>
                                        </div>
                                        <div class="col-sm-1">
                                            <i class="fab fa-app-store-ios"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Material Icons</h5>
                                    <p>Material icons are delightful, beautifully crafted symbols for common actions and items. Visit <a href="https://material.io/resources/icons/" target="_blank">Material Icons Website</a> for a complete list of icons.</p>
                                    <div class="row icon-list-row">
                                        <div class="col-sm">
                                            <i class="material-icons">accessibility</i>
                                        </div>
                                        <div class="col-sm">
                                            <i class="material-icons">face</i>
                                        </div>
                                        <div class="col-sm">
                                            <i class="material-icons">gif</i>
                                        </div>
                                        <div class="col-sm">
                                            <i class="material-icons">language</i>
                                        </div>
                                        <div class="col-sm">
                                            <i class="material-icons">videocam</i>
                                        </div>
                                        <div class="col-sm">
                                            <i class="material-icons">call</i>
                                        </div>
                                        <div class="col-sm">
                                            <i class="material-icons">sentiment_satisfied_alt</i>
                                        </div>
                                        <div class="col-sm">
                                            <i class="material-icons">add_circle_outline</i>
                                        </div>
                                        <div class="col-sm">
                                            <i class="material-icons">report</i>
                                        </div>
                                        <div class="col-sm">
                                            <i class="material-icons">save_alt</i>
                                        </div>
                                        <div class="col-sm">
                                            <i class="material-icons">airplanemode_active</i>
                                        </div>
                                        <div class="col-sm">
                                            <i class="material-icons">bluetooth</i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="lime-footer">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <span class="footer-text">2019 © stacks</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
export default {

}
</script>

<style>

</style>